<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Ginkgoch Shapefile Viewer</title>
  <link href="./dep/fontawesome-free/css/all.min.css" rel="stylesheet">
  <link href="./dep/bootstrap.min.css" rel="stylesheet">
  <link href="./dep/bootstrap-table.min.css" rel="stylesheet">
  <link href="./dep/leaflet.css" rel="stylesheet">
  <link href="./dep/MarkerCluster.css" rel="stylesheet">
  <link href="./dep/MarkerCluster.Default.css" rel="stylesheet">
  <link href="./main.css" rel="stylesheet">
</head>

<body>
  <div class="container-fluid">
    <div class="container-nav">
      <div class="btn-group" role="group" aria-label="File">
        <button type="button" class="btn btn-outline-secondary  btn-choose-file" title="Choose a shapefile to start">
          <i class="fas fa-folder-open toolbox-icon"></i>
        </button>
        <div class="btn-group" role="group">
          <button id="btnGroupDrop1" type="button" class="btn btn-outline-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"
            aria-expanded="false" title="Exports map data to another format">
            <i class="fas fa-file-export toolbox-icon"></i>
          </button>
          <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
            <a class="dropdown-item btn-export-json" href="#">GeoJson</a>
            <a class="dropdown-item btn-export-csv" href="#">CSV</a>
          </div>
        </div>
      </div>

      <div class="btn-group" role="group" aria-label="Map">
        <button type="button" class="btn btn-outline-secondary btn-zoom-default" title="Zooms map back to the default bounds">
          <i class="fas fa-search toolbox-icon"></i>
        </button>
        <button type="button" class="btn btn-outline-secondary btn-zoom-in" title="Zooms map in to one level down">
          <i class="fas fa-search-plus toolbox-icon"></i>
        </button>
        <button type="button" class="btn btn-outline-secondary btn-zoom-out" title="Zooms map out to one level up">
          <i class="fas fa-search-minus toolbox-icon"></i>
        </button>
        <button type="button" class="btn btn-outline-secondary btn-highlight-clear" title="Clear the highlights and popup">
          <i class="fas fa-broom toolbox-icon"></i>
        </button>
        <button type="button" class="btn btn-outline-secondary btn-set-styles" title="Styles" data-toggle="modal" data-target="#styleModalCenter">
          <i class="fas fa-palette toolbox-icon"></i>
        </button>
      </div>

      <div class="btn-group" role="group" aria-label="Community" style="float:right">
        <button type="button" class="btn btn-light btn-github" title="Github">
          <i class="fab fa-github toolbox-icon"></i>
        </button>
        <button type="button" class="btn btn-light btn-twitter" title="Twitter">
          <i class="fab fa-twitter toolbox-icon"></i>
        </button>
        <button type="button" class="btn btn-light btn-issues" title="Report an issue">
          <i class="fas fa-bug toolbox-icon"></i>
        </button>
        <button type="button" class="btn btn-light btn-message" title="Leave a message" data-toggle="modal" data-target="#messageModalCenter">
          <i class="far fa-smile-wink toolbox-icon"></i>
        </button>
      </div>
    </div>
    <div class="container-main">
      <div class="container-map">
        <div id="map"></div>
      </div>
      <div class="container-table">
        <table class="table table-field-data"></table>
      </div>
    </div>
  </div>
  <div class="progress progress-xs-height progress-layout-top">
    <div class="progress-bar" role="progressbar" style="width: 0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
  </div>
  <!-- feedback begin -->
  <div class="modal fade" id="messageModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="messageModalLongTitle">Tell me your feedback</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <form>
          <div class="modal-body">
            <div class="form-group">
              <label for="feedbackInputEmail">Email</label>
              <input type="email" class="form-control" id="feedbackInputEmail" aria-describedby="emailHelp" placeholder="Enter email">
            </div>
            <div class="form-group">
              <label for="feedbackTextareaContent">Message</label>
              <textarea class="form-control" id="feedbackTextareaContent" rows="3"></textarea>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary btn-feedback-save">Save changes</button>
          </div>
        </form>
      </div>
    </div>
  </div>
  <!-- feedback end -->

  <!-- style begin -->
  <div class="modal fade" id="styleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="messageModalLongTitle">Style Configuration</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <form>
          <div class="modal-body">
            <div class="form-group">
              <label for="styleTextareaContent">Styles</label>
              <textarea class="form-control" id="styleTextareaContent" rows="18"></textarea>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary btn-style-save">Save changes</button>
          </div>
        </form>
      </div>
    </div>
  </div>
  <!-- style end -->

  <div class="alert alert-warning alert-dismissible container-alert fade show" role="alert">
    <div>
    </div>
  </div>
</body>

<script>if (typeof module === 'object') {window.module = module; module = undefined;}</script>

<script src="./dep/jquery.min.js"></script>
<script src="./dep/popper.min.js"></script>
<script src="./dep/bootstrap.min.js"></script>
<script src="./dep/bootstrap-table.min.js"></script>
<script src="./dep/leaflet.js"></script>
<script src="./dep/leaflet-providers.js"></script>
<script src="./dep/leaflet.markercluster.js"></script>
<script src="./dep/lodash.min.js"></script>

<script>if (window.module) module = window.module;</script>
<script src="./main.js"></script>

</html>